<template>
  <el-dialog v-model="dialogVisibleInner" title="详情" @close="handlerClose">
  <div class="add-contract">
    <el-card class="card" shadow="hover">
      <template #header>
        <h3 class="title">合同详情</h3>
      </template>

      <!-- 新增表单 -->
      <el-form :model="contractForm" :rules="rules" ref="contractFormRef" label-width="120px" style="max-width: 800px;">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同名称" prop="contractName">
              <el-input v-model="contractForm.contractName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同编号" prop="contractNumber">
              <el-input v-model="contractForm.contractNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同类别" prop="contractCategory">
              <el-input v-model="contractForm.contractCategory"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同期限" prop="contractDuration">
              <el-input v-model="contractForm.contractDuration"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="加盟方" prop="franchisor">
              <el-input v-model="contractForm.franchisor"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="加盟方负责人" prop="franchisorResponsiblePerson">
              <el-input v-model="contractForm.franchisorResponsiblePerson"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="我方公司" prop="ourCompany">
              <el-input v-model="contractForm.ourCompany"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="我方负责人" prop="ourResponsiblePerson">
              <el-input v-model="contractForm.ourResponsiblePerson"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="签订日期" prop="signingDate">
              <el-date-picker v-model="contractForm.signingDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签订地点" prop="signingLocation">
              <el-input v-model="contractForm.signingLocation"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="金额" prop="amount">
              <el-input v-model.number="contractForm.amount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款方式" prop="paymentMethod">
              <el-input v-model="contractForm.paymentMethod"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="分期数" prop="installmentNumber">
              <el-input-number v-model="contractForm.installmentNumber" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="每期比例" prop="proportionPerInstallment">
              <el-input v-model="contractForm.proportionPerInstallment"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="内容及要求" prop="contentAndRequirements">
              <el-input v-model="contractForm.contentAndRequirements" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="达成条件" prop="achievementConditions">
              <el-input v-model="contractForm.achievementConditions" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注" prop="notes">
              <el-input v-model="contractForm.notes" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right;">
            <el-button type="primary" @click="submitForm(contractFormRef)">同意</el-button>
            <el-button @click="resetForm(contractFormRef)">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, onMounted,toRaw,defineProps,watch,defineEmits } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';
const emit = defineEmits();
const router = useRoute();
const handlerClose=(()=>{
  dialogVisibleInner.value = false;
  // 告诉父组件，当前子组件关闭了
  emit('close', false);
})
onMounted(() => {

});
const props = defineProps({
  dialog4add: Boolean  // 是否可见
});
watch(() => props.dialog4add, (newVal) => {
  dialogVisibleInner.value=true
});
const dialogVisibleInner=ref(false)

const contractFormRef = ref(null);

const contractForm = ref({});

// 表单验证规则
const rules = {
  contractName: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
  contractNumber: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
  // 根据需要添加更多规则
};

// 提交表单
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post('/contracts/add', contractForm).then(resp => {
        console.log('Contract added:', resp.data);
        // 成功提示或跳转等操作
      }).catch(error => {
        console.error('Error adding contract:', error);
      });
    } else {
      console.log('error submit!', fields);
    }
  });
};

// 重置表单
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped>
.add-contract {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-color);
  margin-top: 60px;
}

.card {
  max-width: 800px;
  margin: auto;
  padding: 20px;
}

.title {
  font-size: 1.2em;
  margin: 0;
  padding: 0;
}
</style>